<!DOCTYPE html>
<html>
<head>
    <title>选座</title>
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <include file="public@head" />

    <style>
        .order{  text-align: center;  background: #fff;  width: 600px;  padding: 0 30px;  margin: 6% auto;  overflow: hidden;  border-radius: 10px;  }
        .order li{ margin-bottom:20px; position:relative;text-align: left;}
        .order li select.srk{height:45px; line-height:45px; width:100%; border:1px solid #ddd; padding-left:10px; font-size:14px; border-radius:5px;  transition:all .3s ease; padding-left:100px;}
        .order li input.srk{height:45px; line-height:45px; width:100%; border:1px solid #ddd; padding-left:10px; font-size:14px; border-radius:5px;  transition:all .3s ease; padding-left:100px;}
        .order li input.checkbox{line-height:45px; border:1px solid #ddd; padding-left:10px; font-size:14px; border-radius:5px;  transition:all .3s ease; margin-left:100px;}
        .order li input.srk:focus{border:1px solid #A90526; box-shadow:0px 0px 20px #ececec;}
        .order li#award input[type="checkbox"]:checked{width:20px;height:20px;}
        .order li input[type="radio"]:checked{width:20px;height:20px;}
        .order li a.sjyzm{position:absolute; right:8px; top:8px; background:#E4CCAD; border:none; height:30px; line-height:30px; color:#fff; padding-left:10px; padding-right:10px; border-radius:5px; cursor:pointer;}
        .order li a.sjyzm:hover{background:#666;}
        .order li a.order-btn{display:inline-block;width:150px; height:50px; line-height:50px; background:#A90526; color:#fff; border:none; border-radius:100px; font-size:16px; cursor:pointer; box-shadow: 0px 10px 20px #FDD9E0;}
        .order li a.order-btn:hover{background:#CC062E;}
        .order li .txyzm{position:absolute; right:8px; top:8px; width:70px;}
        .order li i{position:absolute; font-family:iconfont; line-height:50px; width:100px; text-align:center; font-size:16px; color:#ccc;}
        .order li span.text{ overflow:hidden;}
        #calculate_money{margin:50px 0;text-align: right;}
        #calculate_money span{float:right;padding-bottom:20px;line-height:1.8;}
        #calculate_money span em{display:inline-block;width:70px;}
        #calculate_money span em.cal_total{color:#CC062E;font-weight:bolder;font-size:18px}
        #order_wrap{display: none;}
        .wrong-attention{color:#CC062E;}
        .wrong-attention b{width:18px;height:18px;line-height: 18px;font-size: 16px;}
    </style>
    <link href="__TMPL__/public/html_assets/css/seatcss.css" rel="stylesheet">


</head>

<body class="body-white">
<include file="public@nav" />
<div class="container " style="min-height: 475px;">
    <!--步骤 -->
    <div class="step wrap">
        <ul>
            <li class="now">1、填写订单</li>
            <li>2、选择座位</li>
            <li>3、支付订单</li>
        </ul>
    </div>
    <!--步骤 -->
    <form action="{:url('Order/one_order')}" class="js-ajax-form" method="post">

        <div class="order wrap">
            <ul id="order_list">
                <li>
                    <i>选择孩子</i>
                    <select name="student_id" id="student_id" class="srk">
                        <option value="0">请选择孩子</option>
                        <foreach name="student_data" item="vo">
                            <option value="{$vo.id}">
                                {$vo.name}
                            </option>
                        </foreach>
                    </select>
                </li>
                <li>
                    <i>班级</i>
                    <input class="srk" type="text" readonly value="{$data.name}" >
                </li>
                <li>
                    <i>开课时间</i>
                    <input class="srk" type="text" readonly value="{:date('Y-m-d ',$data.start_lesson_time)}">
                </li>
                <li>
                    <i>上课时段</i>
                    <input class="srk" type="text" readonly value="周六 9:00-11:00">
                </li>
                <li>
                    <i>课程价格</i>
                    <input class="srk" type="text" readonly name="total_price" value="{$unit_price}">
                </li>
                    <input class="hidden" type="text" readonly name="class_id" value="{$data.id}">
                    <input class="hidden" type="text" readonly name="student_status" value="{$student_status}">

                <li></li>

                <li style="text-align:center!important;">
                    <a class="order-btn" id="srk">
                        下一步
                    </a>
                </li>
            </ul>
        </div>
        <div class=" wrap" id="order_wrap" style="font-family:iconfont;">

                <!--标题 -->
                <!--<div class="order-column">-->
                <!--<h2>选择座位</h2>-->
                <!--</div>-->
                <!--标题 -->

                <!--选座位 -->
                <div class="order-seat" style="width:100%;">
                    <!--黑板 -->
                    <div class="blackboard"><img src="__TMPL__/public/html_assets/images/heiban.jpg" /></div>
                    <!--黑板 -->
                    <!--座位 -->
                    <div id="seat-map">
                        <!--<ul>-->
                        <!--<li class="yes">-->
                        <!--<input type="checkbox" name="checkbox" value="checkbox" class="checkbox" id="seat01" checked="checked" disabled="disabled"/>-->
                        <!--<label for="seat01"><i>&#xe612;</i></label>-->
                        <!--</li>-->
                        <!--</ul>-->
                    </div>

                    <!--座位 -->
                </div>
                <div id="legend"  >
                    <div id="choose">
                        已选座位:
                        <span></span>
                    </div>
                </div>
                <div class="clear"></div>
                <!--选座位 -->
                <!--按钮 -->
                <input type="hidden" name="student_seat" value="" id="student_seat">


                    <div class="order-btn">
                        <button type="submit" class="js-ajax-submit" id="button">下一步</button>
                    </div>

                <!--按钮 -->
        </div>
    </form>

</div>



<include file="public@scripts"/>
<include file="public@footer"/>
<script src="__STATIC__/js/jquery.seat-charts.min.js"></script>

<script>
    jQuery(".class-campus ").slide({});

    set_seat();
    $('.seatCharts-seat').html('&#xe612;');

    set_column();

    //   设置列数为字母
    function set_column() {
        var obj=$('.seatCharts-header>.seatCharts-cell:not(:first)');
        var length=obj.length;
        for (var i=0;i<length;i++){
            if(obj[i].innerHTML>26){
                console.log('超出最大列数Z(26)');
                return false;
            }else{
                obj[i].innerHTML=String.fromCharCode(parseInt(obj[i].innerHTML)+64);
            }
        }
    }
    function set_seat() {
        var row = {$seat_data[0]['rows']};
        var column = {$seat_data[0]['cols']};
        var aisle = "{$seat_data[0]['aisle']}";
        if(aisle) aisle=aisle.split(',');
        var vip = "{$seat_data[0]['vip']}";
        if(vip) vip=vip.split(',');
        var student_seat = "{$seat_data[0]['student_seat']}";
        if(student_seat) student_seat=student_seat.split(',');
        var reserved_seats = "{$seat_data[0]['reserved_seats']}";
        if(reserved_seats) reserved_seats=reserved_seats.split(',');
        var new_map = [];
        if (row && column) {
            //根据行列初步生成座位表的map
            for (var i = 0; i < row; i++) {
                new_map[i] = '';
                for (var j = 0; j < column; j++) {
                    new_map[i] += 'a';
                }
            }
        }

        sc = $('#seat-map').seatCharts({
            map: new_map,
            naming: {
                top: true,
                getLabel: function (character, row, column) {
                    return column;
                }
            },
            legend: { //定义图例
                node: $('#legend'),
                items: [
                    ['a', 'available', '可选座位'],
                    ['a', 'selected', '已选座位'],
                    ['a', 'unavailable', '已售座位'],
                    ['a', 'parentseats', '家长座位']
                ]
            },
            click: function () {
                if (this.status() == 'available') {
                    sc.find('selected').status('available');
                    $("#student_seat").val(this.settings.id);

//                    显示已选座位
                    $('#choose>span').remove();
                    $('<span>'+(this.settings.row+1)+'排'+
                        String.fromCharCode(this.settings.label+64)
                        +'座</span>')
                        .attr('id', 'cart-item-'+this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($('#choose'));
                    return 'selected';
                } else if (this.status() == 'selected') {
                    $("#student_seat").val('');
                    $('#cart-item-'+this.settings.id).remove();
                    return 'available';
                } else {
                    return this.style();
                }
            }
        });

        if(aisle){
            sc.get(aisle).status('aisles');
        }
        if(vip){
            sc.get(vip).status('parentseats');
        }
        if(student_seat){
            sc.get(student_seat).status('unavailable');
        }
        if(reserved_seats){
            sc.get(reserved_seats).status('unavailable');
        }

    }
//点击生成订单的下一步,切换标签
    $("body").on('click','#srk',function(){
        $tid=$("#student_id").val();
        if($tid==0)
        {
            Wind.use('noty', function () {
                noty({
                    text: "请选择孩子",
                    type: 'error',
                    layout: 'center'
                });
            });
            return false;
        }
        $("#order_wrap").css('display','block');
        $("#order_list").css('display','none');
        return false;
    })
</script>


</body>
</html>